<template>
  <s-modal
    title="预览"
    :visible="visible"
    width="80%"
    :closable="!confirmLoading"
    @cancel="
      () => {
        if (!confirmLoading) {
          visible = false
        }
      }
    "
  >
    <a-drawer
      title="调试结果"
      placement="right"
      width="80%"
      :closable="true"
      :visible="resultDataVisible"
      @close="resultDataVisible = false"
    >
      <s-text-area v-model="resultData" style="height: 800px; width: 100%" />
    </a-drawer>
    <template #footer>
      <s-button key="back" @click="debug"> 调试 </s-button>
      <s-button key="submit" type="primary" :loading="confirmLoading" @click="save()">
        保存
      </s-button>
    </template>
    <div style="height: 600px">
      <s-form ref="form" :value="fakeValue">
        <a-col :span="11" style="height: 600px">
          <s-form-item
            v-if="codeConfig && codeConfig.formConfig && codeConfig.formConfig.module"
            label="渲染表单"
            size="big"
          >
            <s-select
              url="/code/module/list"
              :label-field="'moduleValue.' + codeConfig.formConfig.module.labelField"
              value-field="id"
              @change="change"
            />
          </s-form-item>
          <json-viewer v-model="renderData" style="height: 545px" />
        </a-col>
        <a-col :span="11" :offset="2">
          <s-text-area v-model="templateData" style="height: 600px" />
        </a-col>
      </s-form>
    </div>
  </s-modal>
</template>

<script>
import JsonViewer from '@/components/JsonViewer/index.vue'
export default {
  name: 'TemplateData',
  components: { JsonViewer },
  data() {
    return {
      fakeValue: this.formValue,
      confirmLoading: false,
      renderData: null,
      visible: false,
      templateData: null,
      codeConfig: {},
      resultData: null,
      resultDataVisible: false
    }
  },
  created() {
    this.$api.GET('/code/config/selectOne').then((res) => {
      this.codeConfig = res.data
    })
  },
  methods: {
    change(e) {
      this.$api
        .GET('/code/module/obtainFormData', {
          id: e
        })
        .then((res) => {
          this.renderData = res.data
        })
    },
    open(id) {
      this.id = id
      this.$loading(true)
      this.$api
        .GET('/code/template/selectOneById', { id: id })
        .then((res) => {
          if (!res.data) {
            this.$loading(false)
            this.visible = false
            this.$message.warn('数据不存在')
          } else {
            this.templateData = res.data.templateData
            this.$loading(false)
            this.visible = true
          }
        })
        .catch(() => {
          this.$loading(false)
        })
    },
    debug() {
      if (!this.renderData) {
        this.$message.warn('请选择渲染模板!')
        return
      }
      this.$loading(true)
      this.$api
        .POST(
          '/code/template/debug',
          { data: this.renderData, templateData: this.templateData },
          { dataType: 'json' }
        )
        .then((res) => {
          this.$loading(false)
          this.resultData = res.data
          this.resultDataVisible = true
        })
        .catch(() => {
          this.$loading(false)
        })
    },
    save() {
      this.$loading(true)
      this.$api
        .PUT('/code/template/updateTemplateData', { id: this.id, data: this.templateData }, 'form')
        .then((res) => {
          this.$loading(false)
          this.visible = false
        })
        .catch(() => {
          this.$loading(false)
        })
    }
  }
}
</script>

<style lang="less" scoped></style>
